<template>
  <el-row :gutter="20">
    <el-col :span="12" :offset="6">
      <div class="grid-content ep-bg-purple">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="formInline.user" placeholder="请输入姓名" clearable />
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="formInline.sex">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="formInline.age" placeholder="请输入年龄" clearable />
          </el-form-item>
          <el-form-item label="班级">
            <el-select v-model="formInline.clazz" placeholder="请选择班级" clearable>
              <el-option label="软件一班" value="软件一班" />
              <el-option label="软件二班" value="软件二班" />
              <el-option label="软件三班" value="软件三班" />
              <el-option label="软件四班" value="软件四班" />
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期">
            <!-- 改变日期格式：value-format="YYYY-MM-DD" -->
            <el-date-picker v-model="formInline.date" type="dates" placeholder="请选择出生日期" clearable value-format="YYYY-MM-DD"/>
          </el-form-item>
          <el-form-item label="家庭住址">
            <el-input v-model="formInline.address" placeholder="请输入家庭住址" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">添加</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
  </el-row>

  <br>
  <!-- 表格 -->
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="Id" />
    <el-table-column prop="user" label="User" />
    <el-table-column prop="clazz" label="Clazz" />
    <el-table-column prop="sex" label="Sex" />
    <el-table-column prop="age" label="Age" />
    <el-table-column prop="date" label="Date" />
    <el-table-column prop="address" label="Address" />
    <el-table-column prop="controls" label="Controls" >
      <template #default="scope">
        <el-button size="small" link type="primary" @click="deleteRow(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

// 表单双向绑定时的模板
const formInline = reactive({
  id: 0,
  user: '',
  clazz: '',
  date: '',
  address: '',
  sex: '',
  age: '',
})
// 创建空数组
let tableData = reactive([] as any[])

// 添加功能
const onSubmit = () => {
  // 从表单中获取数据形成新对象
  let  newData = {
    id: formInline.id + 1,
    user: formInline.user,
    clazz: formInline.clazz,
    date: formInline.date,
    address: formInline.address,
    sex: formInline.sex,
    age: formInline.age,
  };

  // 将新对象添加进数组中
  tableData.push(newData);
  // 清空表单
  formInline.id = newData.id
  formInline.user = '';
  formInline.clazz = '';
  formInline.date = '';
  formInline.address = '';
  formInline.sex = '';
  formInline.age = '';
}

// 删除
const deleteRow = (index: number) => {
  tableData.splice(index, 1)
}

</script>



<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
</style>